<template>
  <view class="achievement-page">
    <page-head title="我的成就"></page-head>
    
    <view v-if="loading" class="loading">
      <uni-load-more status="loading"></uni-load-more>
    </view>
    
    <view v-if="!loading" class="progress">
      <text>成就完成度: {{completionRate}}%</text>
      <text>已解锁: {{unlockedCount}}/{{totalCount}}</text>
    </view>

    <view v-if="!loading" class="category" v-for="category in categories" :key="category">
      <view class="category-title">{{category}}</view>
      <view class="achievement-list">
        <view 
          v-for="item in achievementsByCategory[category]" 
          :key="item.id"
          :class="['achievement-item', item.status.completed ? 'completed' : '']"
        >
          <view class="icon">
            <uni-icons 
              :type="item.status.completed ? 'checkmarkempty' : 'circle'" 
              :color="item.status.completed ? '#4cd964' : '#999'"
              size="24"
            ></uni-icons>
          </view>
          <view class="content">
            <text class="title">{{item.description}}</text>
            <text class="progress" v-if="item.status.count > 0">
              进度: {{item.status.count}}
            </text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      categories: ['基础成就', '社交成就', '特殊成就'],
      loading: true
    }
  },
  computed: {
    ...mapGetters('achievement', [
      'allAchievements',
      'unlockedCount',
      'completionRate'
    ]),
    totalCount() {
      return this.allAchievements.length
    },
    achievementsByCategory() {
      const result = {}
      this.categories.forEach(cat => {
        result[cat] = this.allAchievements.filter(a => a.category === cat)
      })
      return result
    }
  },
  onLoad() {
    const userId = this.$store.state.openid || 'default-user-id'
    this.$store.dispatch('achievement/loadAchievements', userId)
      .finally(() => {
        this.loading = false
      })
  }
}
</script>

<style>
.achievement-page {
  padding: 20rpx;
}

.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200rpx;
}

.progress {
  display: flex;
  justify-content: space-between;
  padding: 20rpx;
  background: #f8f8f8;
  border-radius: 10rpx;
  margin-bottom: 30rpx;
}

.category-title {
  font-size: 32rpx;
  font-weight: bold;
  margin: 20rpx 0;
  padding-left: 10rpx;
  border-left: 6rpx solid #007aff;
}

.achievement-list {
  background: #fff;
  border-radius: 10rpx;
  overflow: hidden;
}

.achievement-item {
  display: flex;
  padding: 20rpx;
  border-bottom: 1rpx solid #eee;
}

.achievement-item.completed {
  background-color: #f8fff8;
}

.icon {
  margin-right: 20rpx;
}

.content {
  flex: 1;
}

.title {
  display: block;
  font-size: 28rpx;
  margin-bottom: 10rpx;
}

.progress {
  font-size: 24rpx;
  color: #999;
}
</style>
